<script setup lang="ts">
import {ref} from 'vue'
import type {FormInstance} from 'element-plus'
import haveHeadCard from "@/components/haveHead-card.vue";
import orderLookAndEit from "@/components/orderLookAndEit.vue";
//头部数据
const formRef = ref<FormInstance>()
const form = ref({
  input1: '',
  input2: '',
  input3: '',
  select1: '',
})
const value1 = ref('')
const rules = ref({})
//下拉框选项
const select1Options = ref([
  {
    label: '已购买',
    value: '1',
  },
  {
    label: '退货',
    value: '2',
  }])

//表格数据
const tableData = ref([
  {
    order: '14214314',
    data: '19:00:00',
    overData: '19:20:00',
    phone: '18888888888',
    ps: '微辣',
    name: '小貂禅',
    address: '上海市普陀区金沙江路 1518 弄',
    price: '108',
    state: '已受理'
  }, {
    order: '14214314',
    data: '19:00:00',
    overData: '19:20:00',
    phone: '1888899988',
    ps: '微辣',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄',
    price: '108',
    state: '已受理'
  }, {
    order: '14214314',
    data: '19:00:00',
    overData: '19:20:00',
    phone: '18888888999',
    ps: '微辣',
    name: '大大大',
    address: '上海市普陀区金沙江路 1519 弄',
    price: '108',
    state: '已受理'
  }, {
    order: '14214314',
    data: '19:00:00',
    overData: '19:20:00',
    phone: '188888811118',
    ps: '不辣',
    name: '诸葛亮',
    address: '上海市普陀区金沙江路 1516 弄',
    price: '108',
    state: '已受理'
  },
  {
    order: '14214314',
    data: '19:00:00',
    overData: '19:20:00',
    phone: '122312312',
    ps: '微辣',
    name: '刘备',
    address: '上海市普陀区金沙江路 1516 弄',
    price: '108',
    state: '已受理'
  },
  {
    order: '14214314',
    data: '19:00:00',
    overData: '19:20:00',
    phone: '18882312318888',
    ps: '特辣',
    name: '关羽',
    address: '上海市普陀区金沙江路 1516 弄',
    price: '108',
    state: '未受理'
  },
  {
    order: '14214314',
    data: '19:00:00',
    overData: '19:20:00',
    phone: '18888888888',
    ps: '辣',
    name: '黄忠',
    address: '上海市普陀区金沙江路 1516 弄',
    price: '109',
    state: '已受理'
  }])


//弹窗状态
let dialogVisible = ref(false)
//查看编辑状态  0查看 1编辑
let or: any = ref(null)

//关闭弹窗
function closeMask(data: boolean) {
  dialogVisible.value = data
}

//查看弹窗数据
let lookOrderData = ref({})
//编辑弹窗数据
let editOrderData = ref({})
//编辑下标
let editIndex: any = ref(null)


//弹窗状态
//查看弹窗
function lookOrder(row: object) {
  lookOrderData.value = row
  dialogVisible.value = true
  or.value = 0
}


//编辑弹窗
const editOrder = (row: object, index: number) => {
  or.value = 1
  dialogVisible.value = true
  editOrderData.value = row
  editIndex.value = index
}

//获取编辑数据
function emitForm(data: object) {
  tableData.value[editIndex.value] = data
}


//是否显示滚动条
const showScroll = ref(true)


//分页数据

const currentPage4 = ref(4)
const pageSize4 = ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}


const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<template>

  <div class="head-title">
    <haveHeadCard>
      <!--头部-->
      <template #title>
        <div class="card-header">
          <div class="input-title">
            <el-form v-model="form" :rules="rules" ref="formRef" label-position="right" label-width="70px">
              <div class="input-title-items">
                <el-form-item prop="input1" label="订单号">
                  <el-input v-model="form.input1" placeholder="订单号">
                  </el-input>
                </el-form-item>
                <el-form-item prop="input2" label="收货人">
                  <el-input v-model="form.input2" placeholder="收货人">
                  </el-input>
                </el-form-item>
                <el-form-item prop="input3" label="手机号">
                  <el-input v-model="form.input3" placeholder="手机号">
                  </el-input>
                </el-form-item>
                <el-form-item prop="select1" label="状态">
                  <el-select
                      v-model="form.select1"
                      placeholder="订单状态"
                      size="default"
                      style="width: 240px"
                  >
                    <el-option
                        v-for="item in select1Options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </div>
            </el-form>
          </div>
          <div class="input-time">
            <div class="block">
              <span class="demonstration">时间范围</span>
              <div class="time-picker">
                <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    size="large"
                />
              </div>
              <div class="bth">
                <el-button type="primary" size="large">查询</el-button>
              </div>
            </div>
          </div>
        </div>
      </template>
      <!--内容-->
      <template #content>
        <el-table
            :data="tableData"
            border
            :scrollbar-always-on=showScroll
            style="width: 100%">
          <el-table-column
              fixed
              prop="name"
              label="姓名"
              width="150">
          </el-table-column>
          <el-table-column
              fixed
              prop="order"
              label="订单号"
              width="150">
          </el-table-column>
          <el-table-column
              fixed
              prop="data"
              label="下单时间"
              width="150">
          </el-table-column>
          <el-table-column
              fixed
              prop="phone"
              label="手机号"
              width="150">
          </el-table-column>
          <el-table-column
              prop="address"
              label="配送地址"
              width="350">
          </el-table-column>
          <el-table-column
              prop="overData"
              label="送达时间"
              width="200">
          </el-table-column>
          <el-table-column
              prop="ps"
              label="备注"
              width="200">
          </el-table-column>
          <el-table-column
              prop="price"
              label="订单金额"
              width="200">
          </el-table-column>
          <el-table-column
              prop="state"
              label="订单状态"
              width="200">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="lookOrder(scope.row)">
                查看
              </el-button>
              <el-button link type="primary" size="small" @click="editOrder(scope.row,scope.$index)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 页脚 -->
      <template #footer>
        <div class="footer">
          <el-pagination
              v-model:current-page="currentPage4"
              v-model:page-size="pageSize4"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total,prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </template>
    </haveHeadCard>
    <orderLookAndEit :dialogVisible="dialogVisible" @close-mask="closeMask"
                     :lookOrderData="lookOrderData" :or="or" :editOrderData="editOrderData"
                     @emit-form="emitForm"></orderLookAndEit>
  </div>
</template>

<style scoped>
.input-title-items {
  display: flex;
}

.block {
  display: flex;
  align-items: center;
  gap: 10px;
}

.el-table .el-table__cell {
  padding: 15px 0;
  box-sizing: border-box;
}

.card-header {
  width: 100%;
  margin-bottom: 30px;
}

.footer {
  margin-top: 30px;
}
</style>